@mixin border-1px($color:#ccc,$radius:4PX,$style: solid) {
  position: relative;
  &::after {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border: 1PX $style $color;
    border-radius: $radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media (min-resolution: 2dppx) {
      width: 200%;
      height: 200%;
      border-radius: $radius * 2;
      transform: scale(.5) translateZ(0);
    }
    @media (min-resolution: 3dppx) {
      width: 300%;
      height: 300%;
      border-radius: $radius * 3;
      transform: scale(.333) translateZ(0);
    }
  }
}

@mixin border-top-1px($color:#e6e6e6,$style: solid) {
  position: relative;
  &::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border-top: 1PX $style $color;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media (min-resolution: 2dppx) {
      width: 200%;
      height: 200%;
      transform: scale(.5) translateZ(0);
    }
    @media (min-resolution: 3dppx) {
      width: 300%;
      height: 300%;
      transform: scale(.333) translateZ(0);
    }
  }
}

@mixin border-bottom-1px($color:#e6e6e6,$style: solid) {
  position: relative;
  &::after {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border-bottom: 1PX $style $color;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media (min-resolution: 2dppx) {
      width: 200%;
      height: 200%;
      transform: scale(.5) translateZ(0);
    }
    @media (min-resolution: 3dppx) {
      width: 300%;
      height: 300%;
      transform: scale(.333) translateZ(0);
    }
  }
}
